<template>
  <div>
    <HeadNavSecond
      :title="'搜索'"
      @handleBack="handleBackGo"
      :showSearch="false"
      :actions="actions"
      @changeRouter="changeRouter"
    >
    </HeadNavSecond>
    <div class="searchContainer">
      <div class="content">
        <van-search
          v-model="params.userName"
          shape="round"
          placeholder="请输入申请人姓名搜索"
          @search="onSearch"
          :clearable="false"
          show-action
        >
          <template #left-icon>
            <div class="leftIcon"></div>
          </template>
          <template #right-icon>
            <div
              :class="{ rightIcon: params.userName !== '' }"
              @click="onCancel"
            ></div>
          </template>
          <template #action>
            <div @click="handClick">取消</div>
          </template>
        </van-search>
      </div>
      <div class="listContent">
        <van-list
          v-model="loading"
          :finished="finished"
          :offset="offset"
          :finished-text="finishedText"
          @load="onLoad"
        >
          <template v-for="(item, index) in list">
            <div
              @click="handAuthenticateDetails(item)"
              class="container"
              :key="index"
            >
              <div class="box">
                <p class="fw500 title1   first">
                  {{ item.certifiedObject }}申请认证{{ item.applyContent }}
                </p>
                <p class="title2 fw500 f14">
                  认证对象:{{ item.certifiedObject }}
                </p>
                <div class="title2 clearfix fw500 f14">
                  <div class="fl">申请时间:{{ item.applyTime }}</div>
                  <div
                    class="fr"
                    v-if="item.status === 1"
                    style="color: #22cd8d"
                  >
                    认证通过
                  </div>
                  <div
                    class="fr"
                    v-else-if="item.status === 0">待认证</div>
                  <div
                    class="fr"
                    v-else-if="item.status === 2"
                    style="color: #e24d46"
                  >
                    认证失败
                  </div>
                  <div
                    class="fr"
                    v-else>已撤销</div>
                </div>
              </div>
            </div>
          </template>
        </van-list>
        <!-- <div
          class="empty"
          v-if="list.length==0&&loading&&params.userName!==null&&params.userName!==''">
          <span>没有搜索到</span>{{ params.userName }}<span>相关结果</span>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import HeadNavSecond from '@/components/HeadNavSecond'
import { getApplyRecordPagePhoSearch } from '@/api/api'
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  name: 'SearchIndex',
  components: { HeadNavSecond },
  computed: {
    ...mapState({
      token: (state) => state.applyrecords.token
    })
  },
  data () {
    return {
      value: '',
      actions: [{ name: '关于认证应用 ' }],
      isShow: false,
      list: [],
      offset: 50, // 滚动条与底部距离小于 offset 时触发load事件，默认300
      total: 0, // 查询总条数
      loading: false, // 滚动加载中
      finished: false, // 滚动加载完成
      finishedText: '',
      params: {
        pageNo: 0,
        pageSize: 10,
        userName: '',
        access_token: sessionStorage.getItem('Authorization'),
        tenantId: '002'
      }
    }
  },
  created () {},
  methods: {
    handAuthenticateDetails (item) {
      console.log(item.status)
      if (item.status === 0) {
        this.$router.push({
          path: '/authenticateDetails',
          query: { item: JSON.stringify(item) }
        })
      } else {
        this.$router.push({
          path: '/processingRecordDetails',
          query: { item: JSON.stringify(item) }
        })
      }
    },
    handClick () {
      this.params.userName = ''
      this.loading = true
      this.list = []
      this.finished = false
      this.params.pageNo = 0
      this.onLoad()
      this.finishedText = ''
      this.$router.go(-1)
    },
    changeRouter () {
      console.log()
      this.$router.push({ path: '/about' })
    },
    handleBackGo () {
      this.$router.go(-1)
    },
    onCancel () {
      // Toast('取消')
      this.params.userName = ''
      this.loading = true
      this.list = []
      this.finished = false
      this.params.pageNo = 0
      this.onLoad()
      this.finishedText = ''
    },
    onSearch (val) {
      if (val !== '') {
        this.loading = true
        this.list = []
        this.finished = false
        if (!this.finished) {
          this.onLoad()
        }
      } else {
        // debugger
        this.loading = true
        this.list = []
        this.finished = false
        this.onLoad()
        // this.finished = true
      }
    },
    // 调用接口
    getApplyRecordPhoSearch () {
      getApplyRecordPagePhoSearch(this.params).then((res) => {
        if (res.statusCode === 0) {
          res.content.records.forEach((item) => {
            item.applyTime = moment(item.applyTime).utc().format('YYYY-MM-DD')
            if (item.verifyTime !== '' && item.verifyTime !== null) {
              item.verifyTime = moment(item.verifyTime)
                .utc()
                .format('YYYY-MM-DD')
            }
          })
          if (res.content.records === 0) {
            // debugger
            // 判断获取数据条数若等于0
            this.list = [] // 清空数组
            this.finished = true // 停止加载
          }
          // 若数据条数不等于0
          if (this.params.userName !== '') {
            this.list = this.list.concat(res.content.records) // 追加数据
            this.loading = false // 加载状态结束
            // 如果list长度大于等于总数据条数,数据全部加载完成
            console.log(this.list)
            console.log(this.params.pageNo)
            console.log(res.content.pages)
            if (this.params.pageNo > res.content.pages) {
              console.log(this.list.length)
              if (this.list.length > 0) {
                this.finished = true // 结束加载状态
                this.finishedText = '没有更多了'
              } else {
                this.finished = true // 结束加载状态
                this.finishedText =
                  '没有搜索到' + '"' + this.params.userName + '"' + '相关信息'
              }
            }
          } else {
            this.finished = true
          }
        }
      })
    },
    // 滚动加载
    onLoad (val) {
      this.loading = true
      const timer = setTimeout(() => {
        // 定时器仅针对本地数据渲染动画效果,项目中axios请求不需要定时器
        this.getApplyRecordPhoSearch() // 调用上面方法,请求数据
        this.params.pageNo++ // 分页数加一
        if (val === 1) {
          // 每次搜索、或者初始化
          this.params.pageNo = 0
        }
        this.finished && clearTimeout(timer) // 清除计时器
      }, 100)
    }
  }
}
</script>

<style lang="less" scoped>
.searchContainer {
  margin-top: 46px;
  // margin-bottom: 50px;
  overflow: hidden;
  background: #f5f6f7;
}
.content {
  width: 100%;
  position: fixed;
  background: white;
  display: flex;
  height: 58px;
  z-index: 1000;
  border-bottom: 1px solid rgba(245, 244, 249, 1);
  /deep/.van-search {
    padding: 0px;
    background: white;
    width: 343px;
    height: 34px;
    // background: #f9f9f9;
    border-radius: 8px;
    margin-left: 16px;
    margin-top: 5px;
    .leftIcon {
      width: 18px;
      height: 18px;
      background-image: url('../../assets/images/icon_searchbar.png');
      margin-top: 3px;
      background-repeat: no-repeat;
    }
    .rightIcon {
      width: 18px;
      height: 18px;
      background-image: url('../../assets/images/icon_del.png');
      // display: none;
    }
  }
  /deep/.van-search__content--round {
    width: 301px;
    height: 34px;
    border-radius: 8px;
  }
  /deep/.van-search__action {
    font-size: 16px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    margin-left: 10px;
  }
}
.box {
  border-radius: 8px;
}
.title1 {
  // width: 305px;
  color: #333333;
  // line-height: 22px;
  // text-overflow: -o-ellipsis-lastline;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // display: -webkit-box;
  // -webkit-line-clamp: 2; //行数需设置
  // line-clamp: 2;
  // -webkit-box-orient: vertical;
}
.first{

}
.listContent {
  margin-top: 58px;
  width: 100%;
  background: #f5f6f7;
  // min-height: 810px;
  overflow: hidden;
  .container {
    // height: 137px;
    border-radius: 8px;
    background: #ffffff;
    margin: 16px 16px 0 16px;
    overflow: hidden;
    letter-spacing: 1px;
  }
  .box {
    border-radius: 8px;
    border-radius: 8px;
    margin: 15px 22px 16px 16px;
    .fr {
    }
  }
  .title1 {
    font-size: 16px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: bold;
    color: #333333;
    width: 305px;
    max-height: 44px;
    // font-size: 16px;
    // font-family: PingFang-SC-Medium, PingFang-SC;
    // font-weight: bold;
    // line-height: 22px;
    line-height: 22px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //行数需设置
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .title2 {
    color: #666666;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }
  .fr {
    font-size: 13px;
  }
}
</style>
